<template>
    <div class="schoolList">
        <input type="text" placeholder="输入搜索内容" style="margin:auto auto">
        <table border="1" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>学校</th>
                    <th>本科生</th>
                    <th>硕士</th>
                    <th>博士</th>
                    <th>教资</th>
                    <th>小计</th>
                    <th v-show="x==true">统计</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in school.school" :key="index">
                    <td>{{item.school}}</td>
                    <td>{{item.UnderGraduate}}</td>
                    <td>{{item.Master}}</td>
                    <td>{{item.Dr}}</td>
                    <td>{{item.Teach}}</td>
                    <td>{{item.notes}}</td>
                    <td v-show="x==true">{{item.UnderGraduate+item.Master+item.Dr}}</td>
                </tr>
            </tbody>
            <tfoot>
                <button @click="tj()">{{any}}</button>
                <button @click="px()">{{ane}}</button>
            </tfoot>
        </table>
    </div>
</template>

<script>
import school from "@/assets/school.js";
import xx from "@/assets/xx.js";
export default {
    data(){
        return{
           school, 
           x:false,
           any:'统计',
           ane:'排序',
        }
        
    },
    methods:{
        tj(){
            this.x=!this.x;
            if(this.x==true){
                this.any='还原'
            }else{
                this.any='统计'
            }
            
        },
        px(){
            this.x=!this.x;
            if(this.x==true){
            school.school.sort(function(str1,str2){
                return (str2.UnderGraduate+str2.Master+str2.Dr)>(str1.UnderGraduate+str1.Master+str1.Dr) ? 1 : -1;
            })
            this.ane='还原';
            }else if(this.x==false){
                school.school=xx.school;
                this.ane='排序'
            }
        }
    }
}
</script>

<style scoped>
table{
    margin: auto;
}
</style>